<template>
	<!-- 学习计划添加 -->
	<div>
		<!-- 标题区域 -->
		<h4>学习计划表</h4>
		<!-- 提交区域 -->
		<el-form @submit.prevent="add">
			<el-space alignment="start" :size="20">
				<!-- 学习科目 -->
				<el-form-item label="学习科目">
					<el-input v-model.trim="subject" />
				</el-form-item>

				<!-- 学习内容 -->
				<el-form-item label="学习内容">
					<el-input v-model.trim="content" type="textarea" :rows="1" />
				</el-form-item>

				<!-- 学习地点 -->
				<el-form-item label="学习地点">
					<el-select v-model="selectedOption" placeholder="自习室" style="width: 240px">
						<el-option v-for="(item,i) in options" :value="item.place" :label="item.place" :key="i">
						</el-option>
					</el-select>
				</el-form-item>

				<!-- 添加按钮 -->
				<el-form-item>
					<el-button type="primary" @click="add">添加</el-button>
				</el-form-item>
			</el-space>
		</el-form>

	</div>

</template>

<script>
	export default {
		data() {
			return {
				subject: '', //学习科目 
				content: '', //学习内容 			
				selectedOption: '自习室', //学习地点 

				// 供选择的学习地方
				options: [
					{ placeCode: 0, place: '自习室' },
					{ placeCode: 1, place: '图书馆' },
					{ placeCode: 2, place: '宿舍' },
				],
			}
		},
		methods: {
			// 添加方法
			add() {
				// 学习科目不能为空
				if (this.subject === '') {
					alert('学习科目为必填项！')
					return
				}

				// // 生成学习计划记录的id值,数组中最大id值+1
				// let nextId = Math.max(...this.list.map(item => item.id)) + 1
				// // 学习计划表添加记录
				// this.list.push({
				// 	id: nextId,
				// 	subject: this.subject,
				// 	content: this.content,
				// 	place: this.selectedOption,
				// 	status: false,
				// })

				// 触发父组件自定义事件addItem并传参
				this.$emit('addItem', this.subject, this.content, this.selectedOption)
				// 变量重置初始值
				this.subject = ''
				this.content = ''
				this.selectedOption = '自习室'
			},
		},
	}
</script>

<style>
</style>